<template>
  <el-row :gutter="20" class="m-t-5px">
    <el-col :span="6" :lg="12" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">
            <span class="card-panel-num"> {{ itemData.deptName + " " }}</span>
            发货数量</span
          >
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <span class="card-panel-num">{{
            itemData.shipmentQuantityDept ? itemData.shipmentQuantityDept : 0
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">部门待退回数</span>
          <span
            ><span
              class="text"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              @click="getdialogApply('dept')"
              >{{ itemData.quantityToBeReturnedDept }}</span
            ></span
          >
        </div>
      </el-card>
    </el-col>

    <el-dialog
      :visible.sync="opendialogApply"
      width="1700px"
      append-to-body
      v-if="opendialogApply"
    >
      <dialogApply :row="row" />
    </el-dialog>
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <chartDataI :echartDataSku="crowdTrendeList" />

      
    </el-col> -->
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <div id="KoiCardI" style="width: 250px; height: 170px"></div>
    </el-col> -->
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">部门退回数量</span>
          
        </div>
        <div class="text-2xl">
          
          <span class="card-panel-num">{{
            itemData.returnedQuantityDept ? itemData.returnedQuantityDept : 0
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">部门退货率</span>
          <span
            ><span class="text">{{ itemData.returnRateStrDept }}</span></span
          >
        </div>
      </el-card>
    </el-col> -->
    <el-col :span="6" :lg="12" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">
            <span class="card-panel-num"> {{ itemData.nickName + " " }}</span
            >发货数量</span
          >
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <span class="card-panel-num">{{
            itemData.shipmentQuantityUser ? itemData.shipmentQuantityUser : 0
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">个人待退回数</span>
          <span
            ><span
              class="text"
              style="
                color: rgb(37, 137, 255);
                cursor: pointer;
                text-decoration: underline;
              "
              @click="getdialogApply()"
              >{{ itemData.quantityToBeReturnedUser }}</span
            ></span
          >
        </div>
      </el-card>
    </el-col>
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <chartDataI :echartDataSku="crowdTrendeList" />

      
    </el-col> -->
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <div id="KoiCardI" style="width: 250px; height: 170px"></div>
    </el-col> -->
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">个人退回数量</span>
          
        </div>
        <div class="text-2xl">
          
          <span class="card-panel-num">{{
            itemData.returnedQuantityUser ? itemData.returnedQuantityUser : 0
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">个人退货率</span>
          <span
            ><span class="text">{{ itemData.returnRateStrUser }}</span></span
          >
        </div>
      </el-card>
    </el-col> -->
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text"> 商品销售目标</span>
         
        </div>
        <div class="text-2xl">
          
          <span class="card-panel-num">{{ itemData.targetAmount }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text"> 当前销售完成</span>
          <span
            ><span class="text">{{ itemData.completeRate + "%" }}</span></span
          >
        </div>
      </el-card>
    </el-col> -->
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text"> 良品瑕疵品比例</span>
          
        </div>
        <div class="text-2xl">
          
          <span class="card-panel-num">{{
            itemData.goodDefectRatio ? itemData.goodDefectRatio + "%" : 0
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text"> 当前销售完成</span>
          <span
            ><span class="text">{{ itemData.completeRate + "%" }}</span></span
          >
        </div>
      </el-card>
    </el-col> -->
  </el-row>
</template>

<script >
import dialogApply from "@/views/sample/sampleApply/dialogApply.vue";
import { selectSampleApplyByUserId } from "@/api/product/OdsSampleTalentApplyReport.js";
import CountTo from "vue-count-to";
// import { reactive } from "vue";
export default {
  components: {
    // PanelGroup,
    CountTo,
    dialogApply,
    // KoiCard,
  },

  data() {
    return {
      row: {},
      opendialogApply: false,
      itemData: {},
      crowdTrendeList: {},
      //Sku传递数据
      echartDataSku: {
        columns: [],
        rows: [],
      },
      query: {},
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      PurchaseBasicsDwdList: [],
      PurchaseBasicsDwdTotal: 0,
      isOpen: false,
      cardList: [
        {
          title1: "上月支付订单",
          unit: "月",
          value1: 6600,
          title2: "总订单数量",
          value2: 7000,
        },
        {
          title1: "上月退款订单",
          unit: "月",
          value1: 400,
          title2: "退款金额",
          value2: 8000,
        },
        {
          title1: "上月利润",
          unit: "月",
          value1: 66000,
          title2: "盈利",
          value2: 6666,
        },
        {
          title1: "上月新增用户",
          unit: "月",
          value1: 66,
          title2: "上月登录用户",
          value2: 300,
        },
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      selectSampleApplyByUserId().then((response) => {
        this.itemData = response;
      });
    },
    getdialogApply(dept) {
      if (dept == "dept") {
        this.row = {
          pageNum: 1,
          thisPageSize: 10,
          appDept: this.itemData.deptName,
        };
      } else {
        this.row = {
          pageNum: 1,
          thisPageSize: 10,
          appDept: this.itemData.deptName,
          applicantId: this.itemData.userName,
        };
      }
      this.opendialogApply = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.card-panel-text {
  line-height: 18px;
  // color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
  font-weight: 600;
}
.text {
  // color: rgba(0, 0, 0, 0.45);
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
